<template>
	<view class="container">
		<view class="diy-search">
			<view class="inner" :class="itemStyle.searchStyle">
				<text class="search-icon iconfont icon-search"></text>
				<input placeholder-style="color:#bbb;font-size:12px;" type="text" v-model="searchText" placeholder="请输入关键词搜索" />
				<view class="search_btn" @click="getData">搜索</view>
			</view>
		</view>
		<view class="text_jine">金额明细</view>
		<view class="text_yuer">账户余额：{{ now }}</view>
		<view class="item_box" v-for="(t, idx) in dataList" :key="idx">
			<img :src="t.coverImage" />
			<view class="center">
				<view class="c_top">{{ t.remark }}</view>
				<view class="c_bom">{{ t.createTime }}</view>
			</view>
			<view class="item_right"> + {{ t.money }}元</view>
		</view>
		<!-- <view style="margin-top: 30rpx; text-align: center" v-if="dataList.length == 0">暂无数据</view> -->
		<view v-if="dataList.length == 0" style="width: 100%; text-align: center; margin-top: 200rpx">
			<image
				style="width: 500rpx"
				mode="widthFix"
				src="https://zrws-1327345771.cos.ap-shanghai.myqcloud.com/images/1734702481602ONCKpkWwYg0g4d9d4ebe77ff36c5ee1a1590746db1fb.png"
			/>
		</view>
	</view>
</template>
<script>
import { usergetBillList } from '@/api/yanxue/user'
export default {
	data() {
		return {
			searchText: '',
			dataList: [],
			now: 0
		}
	},
	onLoad(options) {
		this.now = options.nowmoney || 0
		this.getData()
	},
	methods: {
		getData() {
			let obj = {
				keyword: this.searchText,
				page: 1,
				rows: 200
			}
			usergetBillList(obj).then(res => {
				console.log(res)
				this.dataList = res.result.list
			})
		}
	}
}
</script>
<style scoped lang="scss">
.container {
	width: 750rpx;
	height: 100vh;
	overflow: scroll;
	background: linear-gradient(180deg, #c1f26d 0%, #f6f6f6 100%);
	padding: 30rpx 22rpx;
	.text_jine {
		width: 158rpx;
		height: 38rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: bold;
		font-size: 40rpx;
		color: #000000;
		margin: 26rpx 22rpx;
	}
	.text_yuer {
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 28rpx;
		color: #656565;
		margin: 26rpx 22rpx;
	}
	.item_box {
		width: 702rpx;
		height: 176rpx;
		background: #ffffff;
		box-shadow: 0rpx 0rpx 12rpx 0rpx rgba(52, 52, 52, 0.13);
		border-radius: 20rpx;
		margin: 20rpx auto;
		display: flex;
		align-items: center;
		padding: 0 24rpx;
		margin-bottom: 20rpx;
		img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			margin-right: 24rpx;
		}
		.center {
			flex: 1;
			.c_top {
				width: 360rpx;
				height: 34rpx;
				font-family: HarmonyOS Sans SC;
				font-weight: bold;
				font-size: 28rpx;
				color: #000000;
				display: -webkit-box; /* 必须设置为 -webkit-box 或者其他 flexbox 布局 */
				-webkit-box-orient: vertical; /* 设置或继承对象的子元素排列方式 */
				-webkit-line-clamp: 1; /* 设置显示的行数 */
				overflow: hidden; /* 隐藏溢出的内容 */
				text-overflow: ellipsis; /* 显示省略号 */
			}
			.c_bom {
				margin-top: 30rpx;
				font-family: HarmonyOS Sans SC;
				font-weight: 400;
				font-size: 22rpx;
				color: #656565;
			}
		}
		.item_right {
			width: 140rpx;
			height: 28rpx;
			font-family: HarmonyOS Sans SC;
			font-weight: bold;
			font-size: 28rpx;
			color: #f95513;
		}
	}
}
.diy-search {
	background: #f1f1f2;
	// font-size: 26rpx;
	width: 706rpx;
	height: 68rpx;
	margin: 0 auto;
	border-radius: 68rpx;
	overflow: hidden;
	margin-bottom: 14rpx;
}

.inner {
	height: 68rpx;
	background: #fff;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: flex-start;
	border: 2px solid #f95513;
	padding: 0 20rpx;
	position: relative;
	border-radius: 34rpx;
	&.radius {
		border-radius: 10rpx;
	}

	&.round {
		border-radius: 68rpx;
	}
	.search-icon {
		margin-right: 8rpx;
		color: #f95513;
		font-weight: bold;
	}
	.search_btn {
		width: 102rpx;
		height: 48rpx;
		background: #a2ff00;
		border-radius: 24rpx;
		font-family: HarmonyOS Sans SC;
		font-weight: 400;
		font-size: 10px;
		color: #010101;
		line-height: 48rpx;
		text-align: center;
		position: absolute;
		right: 8rpx;
	}
}

.search-input {
	height: 60rpx;
	line-height: 60rpx;
	color: #999;
	padding: 0 20rpx;
}
</style>
